iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
0
Modern Web

Vue菜鳥的自我學習days系列 第 4

4.生命週期

  • 分享至 

  • xImage
  •  

任何 Vue App 的 Instance 皆是由 new Vue() 開始建立,並可在傳入的 options object 定義 Instance Lifecycle
Hooks 來自訂各週期呼叫的方法 (圖中白底紅字的部分)

  1. 首先,初始化 Vue lifecycle 及事件方法
  2. 呼叫 Instance Lifecycle Hooks 的 beforeCreate 方法,須注意此時 $data 還無法調用
  3. 初始化注入相依內容及資料綁定
  4. 呼叫 Instance Lifecycle Hooks 的 created 方法,此時 Instance 已初始化完成,事件與屬性已綁定完成,
    $data 已可取得,但尚未掛載 el 且尚未生成 DOM
  5. 判斷 options 中是否有 el 屬性,若有則繼續進行下一步,若無則等待 .$mount(el) 被呼叫
  6. 判斷 options 中是否有 template 屬性,若有,編譯之並放入到 render function 中,若無則以 el 的
    outerHTML 來編譯
    這裡會判斷是否有 render 屬性,若有則優先以 render 來 compile,優先序為 render -> template ->
    el 的內容,render 回傳的內容為 VNode (Virtual Node) 物件,並不是實際的 DOM 物件
  7. 呼叫 Instance Lifecycle Hooks 的 beforeMount 方法,此階段尚未掛載 render 後的內容,尚未將 el 內容
    取代
  8. 將 render 調用後的內容取代 el
  9. 呼叫 Instance Lifecycle Hooks 的 mounted 方法,此階段已經將 render 的內容取代 el,且 DOM 已經綁定
    完成,可以在此階段發送 ajax 來更新頁面資料

上一篇
3.專案建置
下一篇
5.生命週期2
系列文
Vue菜鳥的自我學習days39
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言